<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    table {
      width: 400px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }

    /* 
    thead {
      height: 35px;
      background-color: gray;
      text-align: center;
      border: 1px solid #333;

    } */

    td,
    th {
      border: 1px solid #333;
    }

    thead tr {
      height: 40px;
      background-color: gray;
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>易烊千玺</td>
        <td>javascript</td>
        <td>100</td>
        <td><a href="javascript;:">删除</a></td>
      </tr>
      <tr>
        <td>宋江</td>
        <td>javascript</td>
        <td>90</td>
        <td><a href="javascript;:">删除</a></td>
      </tr>
      <tr>
        <td>李准基</td>
        <td>javascript</td>
        <td>90</td>
        <td><a href="javascript;:">删除</a></td>
      </tr>
      <tr>
        <td>刘亦菲</td>
        <td>javascript</td>
        <td>100</td>
        <td><a href="javascript;:">删除</a></td>
      </tr> -->
    </tbody>
  </table>
  <script>
    // 1.准备好学生的数据
    var dates = [
      {
        name: '魏晨',
        subject: 'JavaScript',
        score: '80'
      }, {
        name: '傅恒',
        subject: 'JavaScript',
        score: '90'
      }, {
        name: '任嘉伦',
        subject: 'JavaScript',
        score: '90'
      }
    ];
    // 2.往tbody里面创建行：有几个人(通过数组的长度)创建多少行
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < dates.length; i++) { // 外面的for循环管行数
      // 1.创建 tr行
      var tr = document.createElement('tr');
      tbody.appendChild(tr);
      // 2.行里面创建单元格(跟数据有关系的3个单元格) td单元格数量取决于每个对象里面的属性个数    for循环遍历对象 datas[i]
      for (var k in dates[i]) { // 里面的for循环管列数td
        var td = document.createElement('td');
        // 把对象里面的属性值 dates[i][k]给 td
        td.innerHTML = dates[i][k];
        tr.appendChild(td);
      }
      // 3.删除有删除2个字的单元格
      var td = document.createElement('td');
      td.innerHTML = "<a href = 'javascript:;'>删除</a>";
      tr.appendChild(td);
    }
    // 4.删除操作开始
    var as = document.querySelectorAll('a');
    // var tr = tbody.querySelectorAll('tr');
    for (var i = 0; i < as.length; i++) {
      as[i].onclick = function () {
        tbody.removeChild(this.parentNode.parentNode);
      }
    }
  </script>
</body>

</html>